import React, { Component } from 'react';
import { connect } from 'react-redux'  
import { Modal, Form, Input, Radio, TreeSelect, Select } from 'antd';
const TreeNode = TreeSelect.TreeNode;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

class UserModal extends Component {
  constructor(props) {
    super(props);
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
      }
     });
  };

  checkPassword = (rule, value, callback) => {
    if(this.props.type == 'create'){
      if(!value && $.trim(value) == ''){
        callback('请输入密码');
      }else{
        callback();
      }
    }else{
      callback();
    }
  }

  checkConfirm = (rule, value, callback) => {
    const form = this.props.form;
    if(this.props.type == 'create'){
      if(!value && $.trim(value) == ''){
        callback('请再次输入密码');
      }
    }
    if (value && value !== form.getFieldValue('password')) {
      callback('两次密码输入不一致，请重新输入');
    } else {
      callback();
    }
  }
  
  render() {

    const { children, user, dispatch, item, depts, roles, currentDept } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    const treeData = (i) => {
      return i.map( d => {
        d.label = d.name;
        d.key = d.id_+'';
        d.value = d.id_+'';
        d.children = d.depts && d.depts.length > 0 ? treeData(d.depts) : [];
        return d;
      })
    }

    const loopRoles = data => data.map((item) => {
      return <Option key={item.id_ + ''}>{item.name}</Option>
    });

    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
          <Form layout='horizontal' onSubmit={this.okHandler}>
            <FormItem style={{ marginBottom: '0px' }}>
              {getFieldDecorator('id',{initialValue:item.id_})(
                <Input type="hidden"/>
              )}
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="用户名"
                  hasFeedback
                >
                  {
                    this.props.type == 'create'?
                    getFieldDecorator('account', {
                      initialValue: item.account,
                      rules: [{
                        required: true, whitespace: true, message: '请输入用户名',
                      }]
                    })(<Input />):
                    getFieldDecorator('account', {
                      initialValue: item.account,
                      rules: [{
                        required: true, whitespace: true, message: '请输入用户名',
                      }]
                    })(<Input readOnly="readonly" />)
                  }
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="密码"
                  required
                  hasFeedback
                >
                  {
                    getFieldDecorator('password', {
                      rules: [{
                        validator: this.checkPassword,
                      }]
                    })(<Input type="password" />)
                  }
            </FormItem>
            <FormItem
              {...formItemLayout}
                required
                label="确认密码"
                hasFeedback
                >
                {getFieldDecorator('confirm', {
                  rules: [{
                    validator: this.checkConfirm,
                  }],
                })(
                  <Input type="password" />
                )}
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="姓名"
                  hasFeedback
                >
                  {
                    getFieldDecorator('name', {
                      initialValue: item.name,
                      rules: [{
                        required: true, whitespace: true, message: '请输入姓名',
                      }]
                    })(<Input />)
                  }
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="所属部门"
                  hasFeedback
                >
                  {
                    getFieldDecorator('deptId', {
                      initialValue: item.deptId_ == null ? currentDept : item.deptId_ + '',
                      rules: [{
                        required: true, whitespace: true, message: '请选择所属部门',
                      }]
                    })(
                      <TreeSelect
                        showSearch
                        treeNodeFilterProp="title"
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择上级部门"
                        notFoundContent="无匹配结果"
                        allowClear                        
                        treeData={treeData(depts)}
                        treeDefaultExpandAll
                      >
                       
                      </TreeSelect>
                    )
                  }
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="角色"
                  hasFeedback
                >
                  {
                    getFieldDecorator('role', {
                      initialValue: item.role_,
                      rules: [{
                        required: true, message: '请选择角色',
                      }]
                    })(
                      <Select
                        mode="multiple"
                        placeholder="请选择角色"
                      >
                        {loopRoles(roles)}
                      </Select>
                    )
                  }
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="性别"
                >
                  {
                    getFieldDecorator('sex', {
                      initialValue:  item.sex == null? 1 : item.sex,
                    })(
                      <RadioGroup>
                        <Radio value={1}>男</Radio>
                        <Radio value={2}>女</Radio>
                      </RadioGroup>
                    )
                  }
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="电话"
                  hasFeedback
                >
                  {
                    getFieldDecorator('phone', {
                      initialValue: item.phone,
                      rules: [{
                        required: true, whitespace: true, message: '请输入电话',
                      }]
                    })(<Input />)
                  }
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="邮箱"
                  hasFeedback
                >
                  {
                    getFieldDecorator('email', {
                      initialValue: item.email,
                      rules: [{
                          type: 'email', message: '请输入有效的邮箱!',
                        },{
                          required: true, whitespace: true, message: '请输入邮箱',
                        }]
                    })(<Input />)
                  }
            </FormItem>
            <FormItem
                  {...formItemLayout}
                  label="状态"
                >
                  {
                    getFieldDecorator('status', {
                      initialValue: item.status == null? 1 : item.status,
                    })(
                      <RadioGroup>
                        <Radio value={1}>正常</Radio>
                        <Radio value={2}>锁定</Radio>
                        <Radio value={3}>禁用</Radio>
                      </RadioGroup>
                    )
                  }
            </FormItem>
          </Form>
        </Modal>
      </span>
    );
  }
    
}

export default Form.create()(UserModal)
